// 个人中心
<template>
  <div class="myInvoice">
    <ul class="title">
      <li
        v-for="(item,key) in title"
        :key="key"
        :class="key == index ? 'active' : '' "
        @click="changesjump(key)"
      >
        {{item.name}}
        <i v-show="item.num">({{item.num}})</i>
      </li>
    </ul>
    <!-- 基本资料 -->
    <basic-data v-if="itemsShow[0]" @upgrade="upgrade"></basic-data>
    <!-- 企业信息 -->
    <enterprise-information v-show="itemsShow[1]"></enterprise-information>
    <!-- 账户安全 -->
    <account-security v-if="itemsShow[2]"></account-security>
    <general-taxpayers v-if="itemsShow[3]"></general-taxpayers>
    <!--一般纳税人-->
  </div>
</template>

<script>
import image from "../../../assets/images/title.png"
import BasicData from "./mycenterComponent/BasicData.vue" // 基本资料
import EnterpriseInformation from "./mycenterComponent/EnterpriseInformation.vue" // 企业信息
import AccountSecurity from "./mycenterComponent/AccountSecurity.vue" // 账户安全
import GeneralTaxpayers from "./mycenterComponent/GeneralTaxpayers.vue" // 一般纳税人
export default {
  name: "myCenter",
  data() {
    return {
      //菜单切换
      index: 0,
      itemsShow: [1, 0, 0, 0],
      title: [
        {
          name: "基本资料",
          id: 0
        },
        {
          name: "企业信息",
          id: 1
        },
        {
          name: "账户安全",
          id: 2
        },
        {
          name: '一般纳税人',
          id: 3
        }
      ]
    }
  },

  components: {
    BasicData,
    EnterpriseInformation,
    AccountSecurity,
    GeneralTaxpayers
  },

  methods: {
    // 升级的 切面切换
    upgrade() {
      this.itemsShow = [0, 1, 0, 0]
      this.index = 1
    },
    // 基本信息 企业信息 账户安全 切换
    changesjump(key) {
      this.index = key
      for (let i = 0; i <= this.title.length; i++) {
        this.itemsShow[i] = 0
        if (this.index == i) {
          this.itemsShow[i] = 1
        }
      }
    }
  },
  mounted() {
    if (!this.$store.state.Taxpayer) {
      this.MyCenter = this.MyCenter.slice(0, 3)
    }
  }
}
</script>

<style lang="scss" scoped>
.myInvoice {
  width: 970px;
  background: #fff;
  padding: 15px;
  margin-bottom: 30px;
  box-sizing: border-box;
  .title {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f7f7f7;
    margin-bottom: 20px;
    li {
      line-height: 56px;
      font-size: 16px;
      text-align: center;
      padding: 5px 10px;
      letter-spacing: 1.5px;
      margin: 0 15px;
      cursor: pointer;
      i {
        color: #ff9000;
      }
    }
    .active {
      color: #ff9000;
      line-height: 56px;
      font-weight: bold;
      border-bottom: #ff9000 solid 2px;
    }
  }
}
</style>


